<template>
  <div class="doc-type">
    <h2>{{ type.name }}</h2>
    <p v-if="type.note">{{ type.note }}</p><template v-else />
    <template v-if="type.type == 'enum'">
      <ee-space wrap>
        <ee-tag :border="false" v-for="item, index in type.value" :key="index">
          '{{ item.name }}'
          <template v-if="item.note">
            - {{ item.note }}
          </template><template v-else />
        </ee-tag>
      </ee-space>
    </template>
    <template v-else-if="type.type == 'class'">
      <ee-table :datas="type.value"
                :columns="[{ name: 'name', title: '属性' }, { name: 'note', title: '说明' }, { name: 'type', title: '类型' }]">
        <template #type="{ value }">
          <ul class="types">
            <li v-for="item, index in value" :key="index">
              {{ item }}
            </li>
          </ul>
        </template>
      </ee-table>
    </template>
    <template v-else-if="type.type == 'function'">
      <ee-table :datas="type.value"
                :columns="[{ name: 'name', title: '属性' }, { name: 'note', title: '说明' }, { name: 'type', title: '类型' }]">
        <template #type="{ value }">
          <ul class="types">
            <li v-for="item, index in value" :key="index">
              {{ item }}
            </li>
          </ul>
        </template>
      </ee-table>
      <!-- 大家觉得下面这种不好理解 -->
      <!-- <ul class="types">
        function (
        <li v-for="item, index in type.value.filter(i => i.name != 'return')" :key="index">
          {{ `参数${index + 1}${item.note ? ' - ' + item.note : ''}` }}
          <ul class="types">
            <li v-for="item2, index2 in item.type" :key="index2">
              {{ item2 }}
            </li>
          </ul>
        </li>
        )
        <li v-for="item, index in type.value.filter(i => i.name == 'return')" :key="index">
          返回值 {{ item.note }}
          <ul class="types">
            <li v-for="item2, index2 in item.type" :key="index2">
              {{ item2 }}
            </li>
          </ul>
        </li>
      </ul> -->
    </template>
    <template v-else-if="type.type == 'types'">
      <ul class="types">
        <li v-for="item, index in type.value" :key="index">
          {{ item }}
        </li>
      </ul>
    </template>
    <template v-else-if="type.type == 'const'">

    </template>
  </div>
</template>

<script type="text/javascript">
/** 展示类型 */
export default {
  name: "doc-type",
  data() {
    return {
    }
  },
  props: {
    type: Object,
  },
  computed: {
  },
  methods: {
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
.doc-type {
  > * {
    margin: 0;
  }

  > p {
    margin-bottom: 1em;
  }

  .types {
    list-style-type: disc;

    li {
      margin-inline-start: 1.5em;
    }
  }
}
</style>